<template>
	<view>
		<view class="uni-border">
			<uni-collapse>
				<uni-collapse-item title="关注分组" :show-animation="true">
					<view class="mycss-flex-start-clumncenter-warp">
						<view class="mycss-max-width95 uni-mt-5">
							<u-button size="small" type="warning" @click="addgroup()">新增分组</u-button>
						</view>
						<view class="mycss-max-width95 uni-mt-5" v-for="(item,index) in groups">
							<view class="mycss-flex-start">
								<view class="mycss-max-width90">
									<u-button size="small" type="primary" :text="item.name"
										:plain="checkedGroupId==item.id?false:true"
										@click="clickButton(item.id)"></u-button>
								</view>
								<view>
									<u-button size="small" type="error"
										@click="clickDelButton(item.id)">删除</u-button>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
	<view>
		<AllPlanPanel url="/personalPlan/getFollowUserDailyTable" :groupId="checkedGroupId">
		</AllPlanPanel>
	</view>
	<view>
		<uni-popup ref="popup" background-color="#fff" class="mycss-max-height65" :mask-click="true">
			<PersonSelect :selectedItems="foucsIds" ref="personRef">
				<template #s1>
					<view class="uni-ma-4 my-btn">
						<uni-easyinput class="uni-mt-5" trim="all" v-model="inputName" placeholder="请输入组名"></uni-easyinput>
					</view>
				</template>
				<template #s2>
					<view>
						<u-button type="warning" @click="doInput" size="small">录入</u-button>
					</view>
				</template>
			</PersonSelect>
		</uni-popup>
	</view>
	<u-toast ref="myuToast"></u-toast>
</template>
<script setup>
	import AllPlanPanel from "@/pages/all-plan/components/all-plan-panel/all-plan-panel.vue"
	import PersonSelect from "@/pages/components/person-select/person-select.vue"
	import {
		onMounted,
		reactive,
		ref,
		inject
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const http = inject("$http");
	const utils = inject("$utils")
	const includeIds = ref("");
	const showFoucs = ref(true);
	const checkedGroupId = ref("");
	const groups = reactive([]);
	const inputName=ref("")
	const popup = ref();
	const foucsIds = reactive([])
	const myuToast = ref("")
	const personRef = ref();
	onMounted(() => {
		console.log(popup.value);
		console.log(myuToast.value);
		console.log(personRef.value);
	})
	onLoad(() => {
		http.post("/userFollowGroup/getAllAndMembers").then((res) => {
			if (res && res.data && res.data.code == 1) {
				groups.splice(0, groups.length);
				groups.push(...res.data.data.groups);
				if (groups.length > 0) {
					checkedGroupId.value = groups[0].id;
				}
			}
		}).catch((re) => {
			console.log(re)
		});
	})

	function showFoucsMenu() {
		showFoucs.value = !showFoucs.value
	}

	function addgroup() {
		popup.value.open("bottom");
	}

	function okFoucs() {
		http.post("/userFollowGroup/getAllAndMembers").then((res) => {
			if (res && res.data && res.data.code == 1) {
				groups.splice(0, groups.length);
				groups.push(...res.data.data.groups);
			}
			popup.value.close();
		}).catch((re) => {
			console.log(re)
		});
	}

	function clickButton(id) {
		checkedGroupId.value = id;
	}

	function clickDelButton(id) {
		utils.showConfirm("确定要删除吗?", () => {
			http.post("/userFollowGroup/delete", {
				id: id
			}).then((res) => {
				if (res && res.data && res.data.code == 1) {
					okFoucs();
				}
			}).catch((re) => {
				console.log(re)
			});
		})
	}
	//录入
	function doInput(){
		if(foucsIds.length==0){
			myuToast.value.show({
				type:"error",message:"没有选择关注的人"
			})
			return;
		}
		if(inputName.value==""){
			myuToast.value.show({
				type:"error",message:"请输入分组名"
			})
			return;
		}
		//录入
		let p={};
		p.name=inputName.value;
		let ids=foucsIds.map((item)=>{
			return item.id;
		})
		p.followUserIds=ids.join(",");
		http.post("/userFollowGroup/edit", p).then((res) => {
			if (res && res.data && res.data.code == 1) {
				okFoucs();
				popup.value.close();
			}
		}).catch((re) => {
			console.log(re)
		});
	}
</script>